apps/meteor/client/views/admin/settings/Setting/inputs/MultiSelectSettingInput.tsx (1)

18-59: Add aria-describedby to associate the hint with the input (accessibility).

Link the hint to the control so screen readers announce it.

 function MultiSelectSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   disabled,
   required,
   values = [],
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
   autocomplete,
 }: MultiSelectSettingInputProps): ReactElement {
   const { t } = useTranslation();
 
   const handleChange = (value: string[]): void => {
     onChangeValue?.(value);
     // onChangeValue && onChangeValue([...event.currentTarget.querySelectorAll('option')].filter((e) => e.selected).map((el) => el.value));
   };
   const Component = autocomplete ? MultiSelectFiltered : MultiSelect;
+  const hintId = `${_id}-hint`;
   return (
     <Field>
       <FieldRow>
         <FieldLabel htmlFor={_id} title={_id} required={required}>
           {label}
         </FieldLabel>
         {hasResetButton && <ResetSettingButton data-qa-reset-setting-id={_id} onClick={onResetButtonClick} />}
       </FieldRow>
       <FieldRow>
         <Component
           max-width='full'
           data-qa-setting-id={_id}
           id={_id}
           value={value}
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readonly}
           // autoComplete={autocomplete === false ? 'off' : undefined}
           onChange={handleChange}
           options={values.map(({ key, i18nLabel }) => [key, t(i18nLabel)])}
+          aria-describedby={hint ? hintId : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}
     </Field>
   );
 }

apps/meteor/client/views/admin/settings/Setting/inputs/PasswordSettingInput.tsx (1)

13-48: Add aria-describedby to associate the hint with the input (accessibility).

Ensure assistive tech reads the hint when focusing the password field.

 function PasswordSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   autocomplete,
   disabled,
   required,
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
 }: PasswordSettingInputProps): ReactElement {
   const handleChange: EventHandler<SyntheticEvent<HTMLInputElement>> = (event) => {
     onChangeValue?.(event.currentTarget.value);
   };
 
   return (
     <Field>
       <FieldRow>
         <FieldLabel htmlFor={_id} title={_id} required={required}>
           {label}
         </FieldLabel>
         {hasResetButton && <ResetSettingButton data-qa-reset-setting-id={_id} onClick={onResetButtonClick} />}
       </FieldRow>
       <FieldRow>
         <PasswordInput
           data-qa-setting-id={_id}
           id={_id}
           value={value}
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readonly}
           autoComplete={autocomplete === false ? 'new-password' : undefined}
           onChange={handleChange}
+          aria-describedby={hint ? `${_id}-hint` : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={`${_id}-hint`}>{hint}</FieldHint>}
     </Field>
   );
 }

apps/meteor/client/views/admin/settings/Setting/MemoizedSetting.tsx (1)

90-101: Optional: tighten typing for InputComponent props to include hint.

inputsByType uses ElementType, so TS won’t catch missing hint support. Consider a shared prop interface with hint?: ReactNode to improve safety.

apps/meteor/client/views/admin/settings/Setting/inputs/ColorSettingInput.tsx (1)

21-104: Add aria-describedby to associate the hint with the input(s) (accessibility).

Apply to both editor modes and the trailing FieldHint.

 function ColorSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   editor,
   allowedTypes = [],
   placeholder,
   readonly,
   autocomplete,
   disabled,
   required,
   hasResetButton,
   onChangeValue,
   onChangeEditor,
   onResetButtonClick,
 }: ColorSettingInputProps): ReactElement {
   const { t } = useTranslation();
+  const hintId = `${_id}-hint`;
 
 ...
-              {editor === 'color' && (
+              {editor === 'color' && (
                 <InputBox
                   data-qa-setting-id={_id}
                   type='color'
                   id={_id}
                   value={value}
                   placeholder={placeholder}
                   disabled={disabled}
                   readOnly={readonly}
                   autoComplete={autocomplete === false ? 'off' : undefined}
                   onChange={handleChange}
+                  aria-describedby={hint ? hintId : undefined}
                 />
               )}
-              {editor === 'expression' && (
+              {editor === 'expression' && (
                 <TextInput
                   data-qa-setting-id={_id}
                   id={_id}
                   value={value}
                   placeholder={placeholder}
                   disabled={disabled}
                   readOnly={readonly}
                   autoComplete={autocomplete === false ? 'off' : undefined}
                   onChange={handleChange}
+                  aria-describedby={hint ? hintId : undefined}
                 />
               )}
 ...
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/LanguageSettingInput.tsx (1)

14-52: Add aria-describedby to associate the hint with the select (accessibility).

 function LanguageSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   autocomplete,
   disabled,
   required,
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
 }: LanguageSettingInputProps): ReactElement {
   const languages = useLanguages();
+  const hintId = `${_id}-hint`;
 ...
         <Select
           data-qa-setting-id={_id}
           id={_id}
           value={value}
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readonly}
           autoComplete={autocomplete === false ? 'off' : undefined}
           onChange={(value) => handleChange(String(value))}
           options={languages.map(({ key, name }) => [key, name])}
+          aria-describedby={hint ? hintId : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/LookupSettingInput.tsx (1)

19-65: Add aria-describedby to associate the hint with the select (accessibility).

 function LookupSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   autocomplete,
   disabled,
   required,
   lookupEndpoint,
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
 }: LookupSettingInputProps): ReactElement {
+  const hintId = `${_id}-hint`;
 ...
         <Select
           data-qa-setting-id={_id}
           id={_id}
           value={value}
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readonly}
           autoComplete={autocomplete === false ? 'off' : undefined}
           onChange={(value) => handleChange(String(value))}
           options={values.map(({ key, label }) => [key, label])}
+          aria-describedby={hint ? hintId : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/SelectTimezoneSettingInput.tsx (1)

14-50: Add aria-describedby to associate the hint with the select (accessibility).

 function SelectTimezoneSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   autocomplete,
   disabled,
   required,
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
 }: SelectTimezoneSettingInputProps): ReactElement {
   const handleChange = (value: string): void => {
     onChangeValue?.(value);
   };
+  const hintId = `${_id}-hint`;
 ...
         <Select
           data-qa-setting-id={_id}
           id={_id}
           value={value}
           placeholder={placeholder}
           disabled={disabled}
           readOnly={readonly}
           autoComplete={autocomplete === false ? 'off' : undefined}
           onChange={(value) => handleChange(String(value))}
           options={moment.tz.names().map((key) => [key, key])}
+          aria-describedby={hint ? hintId : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/RoomPickSettingInput.tsx (1)

15-51: Add aria-describedby to associate the hint with the autocomplete (accessibility).

If RoomAutoCompleteMultiple forwards aria-* props, wire it to the hint.

 function RoomPickSettingInput({
   _id,
   label,
   value,
-  hint,
+  hint,
   placeholder,
   readonly,
   disabled,
   required,
   hasResetButton,
   onChangeValue,
   onResetButtonClick,
 }: RoomPickSettingInputProps): ReactElement {
   const parsedValue = (value || []).map(({ _id }) => _id);
+  const hintId = `${_id}-hint`;
 ...
         <RoomAutoCompleteMultiple
           readOnly={readonly}
           placeholder={placeholder}
           disabled={disabled}
           value={parsedValue}
           onChange={handleChange}
+          aria-describedby={hint ? hintId : undefined}
         />
       </FieldRow>
-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={hintId}>{hint}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/StringSettingInput.tsx (1)

44-56: Link hint to inputs via aria-describedby for better a11y

Associate FieldHint to the input/textarea so screen readers announce it.

 					<TextAreaInput
 						data-qa-setting-id={_id}
 						id={_id}
 						name={name}
 						rows={4}
 						value={value}
 						placeholder={placeholder}
 						disabled={disabled}
 						readOnly={readonly}
 						error={error}
 						autoComplete={autocomplete === false ? 'off' : undefined}
+						aria-describedby={hint ? `${_id}-hint` : undefined}
 						onChange={handleChange}
 					/>
...
 					<TextInput
 						data-qa-setting-id={_id}
 						id={_id}
 						value={value}
 						name={name}
 						placeholder={placeholder}
 						disabled={disabled}
 						readOnly={readonly}
 						autoComplete={autocomplete === false ? 'off' : undefined}
 						error={error}
+						aria-describedby={hint ? `${_id}-hint` : undefined}
 						onChange={handleChange}
 					/>
...
-			{hint && <FieldHint>{hint}</FieldHint>}
+			{hint && <FieldHint id={`${_id}-hint`}>{hint}</FieldHint>}

Also applies to: 58-69, 72-73

apps/meteor/client/views/admin/settings/Setting/inputs/ActionSettingInput.tsx (1)

35-41: A11y: associate hints with the control via aria-describedby

Improve screen-reader experience by linking the hints to the button.

Apply within the changed range:

-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={`${_id}-hint`}>{hint}</FieldHint>}

Apply outside the changed range (illustrative TSX snippet):

// before return (inside component)
const describedBy =
	[
		sectionChanged ? `${_id}-sectionChanged-hint` : undefined,
		hint ? `${_id}-hint` : undefined,
	].filter(Boolean).join(' ') || undefined;

// in JSX
<Button
	data-qa-setting-id={_id}
	disabled={disabled || sectionChanged}
	primary
	onClick={handleClick}
	aria-describedby={describedBy}
>
	{t(actionText)}
</Button>

{sectionChanged && <FieldHint id={`${_id}-sectionChanged-hint`}>{t('Save_to_enable_this_action')}</FieldHint>}

apps/meteor/client/views/admin/settings/Setting/inputs/FontSettingInput.tsx (1)

49-49: A11y: link hint to input via aria-describedby

Associate the hint with the input for screen readers.

Apply within the changed range:

-      {hint && <FieldHint>{hint}</FieldHint>}
+      {hint && <FieldHint id={`${_id}-hint`}>{hint}</FieldHint>}

Apply outside the changed range (illustrative TSX snippet):

// before return (inside component)
const describedBy = hint ? `${_id}-hint` : undefined;

// on TextInput
<TextInput
  ...
  aria-describedby={describedBy}
/>

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.